<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=0.5, initial-scale=1.0">
	
	<title>my first bootstrap page</title>

	<link rel="stylesheet" type="text/css" href="${webServer}/resource/css/bootstrap.css">

	<script type="text/javascript" src="${webServer}/resource/js/jquery.min.js"></script>
	<script type="text/javascript" src="${webServer}/resource/js/bootstrap.js"></script>

	<style type="text/css">
		
	</style>
</head>
<body>
	<nav class="navbar navbar-inverse" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="javascript:void(0);">my library</a>
			</div>
			<div class="col-md-offset-2">
				<ul class="nav navbar-nav">
					<li class="active"><a href="javascript:void(0);">中文资料</a></li>
					<li><a href="javascript:void(0);">外文资料</a></li>
					<li><a href="javascript:void(0);">网络技术资料</a></li>
					<li class="dropdown">
						<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">技术语言指导
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="javascript:void(0);">java语言</a></li>
							<li class="divider"></li>
							<li><a href="javascript:void(0);">C语言</a></li>
							<li><a href="javascript:void(0);">C++语言</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="col-md-offset-10">
				<ul class="nav navbar-nav">
					<li class="disable"><a href="javascript:void(0);">欢迎:张三</a></li>
					<li class=""><a href="javascript:void(0);">2016-10-24</a></li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-md-2">
				<ul class="nav nav-stacked" style="background-color: rgba(211, 220, 222, 0.16);;">
					<li style="background-color: rgba(134, 167, 210, 0.52);"><a href="javascript:void(0);">英文资料</a></li>
					<li><a href="javascript:void(0);">中文资料</a></li>
					<li class="disabled"><a href="javascript:void(0);">英文资料</a></li>
					<li><a href="javascript:void(0);">
						<span class="glyphicon glyphicon-fire"></span>中文资料</a></li>
					<li><a href="javascript:void(0);">
						<span class="glyphicon glyphicon-fire">英文资料</a></li>
					<li><a href="javascript:void(0);">中文资料</a></li>
					<li><a href="javascript:void(0);">英文资料</a></li>
				</ul>
			</div>
			<div class="col-md-10" style="backgroung-color:red;height:200px">
				<div id="myCarousel" class="carousel slide">
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<div class="carousel-inner">
						<div class="item active">
							<img src="${webServer}/resource/img/Jellyfish.jpg" alt="First slide">
            				<div class="carousel-caption">美如画</div>
						</div>
						<div class="item">
							<img src="${webServer}/resource/img/Koala.jpg" alt="Second slide">
            				<div class="carousel-caption">美如画</div>
						</div>
						<div class="item">
							<img src="${webServer}/resource/img/Lighthouse.jpg" alt="Third slide">
            				<div class="carousel-caption">美如画</div>
						</div>
					</div>
				</div>

				<div style="margin-top:20px">
					<ol class="breadcrumb">
					    <li><a href="javascript:void(0);">Home</a></li>
					    <li><a href="javascript:void(0);">first</a></li>
					    <li class="active">second</li>
					</ol>
				</div>

				<div style="margin-top:20px">
					<table class="table table-hover">
						<caption>悬停表格布局</caption>
						<thead>
							<tr>
								<th>id</th>
								<th>姓名</th>
								<th>性别</th>
								<th>年龄</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${userList}" var="user">
								<tr>
								<td>${user.id}</td>
								<td>${user.name}</td>
								<td>${user.sex}</td>
								<td>${user.age}</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>

				<div style="margin-top:20px">					
					<button type="button" class="btn btn-lg btn-primary" data-toggle="collapse" 
						data-target="#demo">简单的可折叠组件
					</button>    
					<div id="demo" class="collapse in">
						Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
					cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
					vice lomo.
					</div>
					<div class="pannel pannel-default">
						<div class="panel-heading">
							<span class="pannel-title">
								<a data-toggle="collapse" data-target="#myDemo">点击</a>
							</span>
						</div>
						<div id="myDemo" class="pannel-collapse collapse in">
							<div class="panel-body">
								Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
							cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
							vice lomo.
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>

	</script>
</body>
</html>